// components/PrivacyPolicy.tsx
import React from 'react';
import { Link } from 'react-router-dom';
import { PRIVACY_POLICY } from '../../constant';

interface PrivacyPolicyProps {
    companyName: string;
    contactEmail: string;
    lastUpdated: string;
    customSections?: Array<{
        title: string;
        content: string;
        links?: { text: string; url: string }[];
    }>;
}

const PrivacyPolicy: React.FC<PrivacyPolicyProps> = ({
    companyName,
    contactEmail,
    lastUpdated,
    customSections
}) => {
    const sections = customSections || PRIVACY_POLICY.sections;

    const renderContent = (text: string, links?: typeof sections[0]['links']) => {
        if (!links) return text;

        let result = text;
        const elements = [];

        links.forEach((link, i) => {
            const parts = result.split(`[link${i}]`);
            elements.push(parts[0]);
            elements.push(
                <Link
                    key={i}
                    to={link.url}
                    className="text-blue-600 hover:underline"
                    target="_blank"
                >
                    {link.text}
                </Link>
            );
            result = parts[1] || '';
        });
        elements.push(result);

        return <>{elements}</>;
    };

    return (
        <div className="bg-white p-6 max-w-4xl mx-auto">
            <h1 className="text-2xl font-bold mb-6">
                {PRIVACY_POLICY.title}
            </h1>

            <p className="mb-8">
                {PRIVACY_POLICY.intro(companyName)}
            </p>

            <div className="space-y-8">
                {sections.map((section, i) => (
                    <div key={i}>
                        <h2 className="text-xl font-semibold mb-3">
                            {section.title}
                        </h2>
                        <div className="text-gray-800 leading-relaxed">
                            {renderContent(
                                section.content,
                                section.links
                            )}
                        </div>
                    </div>
                ))}
            </div>

            <div className="mt-10 pt-6 border-t border-gray-200">
                <p>{PRIVACY_POLICY.footer.contact(contactEmail)}</p>
                <p>{PRIVACY_POLICY.footer.updated(lastUpdated)}</p>
            </div>
        </div>
    );
};

export default PrivacyPolicy;